<template>
  <div class="box">
    <div class="header">
      <Header :getshome="getshome" />
    </div>
    <div class="nav">
      <router-link
        v-for="(item, i) in newarr"
        :key="i"
        :to="item.path"
        :class="$route.path == item.path ? 'active' : ''"
        >{{ item.name }}</router-link
      >
    </div>

    <div class="main">
      <!-- 通过父子传参  把接口的数据发送过去 -->
      <router-view
        :goodsList="goodsList"
        :getshome="getshome"
        :getspac="getspac"
      ></router-view>
    </div>
    <div><Footer /></div>
  </div>
</template>

<script>
//引入并且结构
import { api_getshop, api_getshophome, api_getshopspeack } from "@/apis/api.js";
//引入头部
import Header from "@/components/Header.vue";
//引入尾部
import Footer from "@/components/Footer.vue";

export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      newarr: [
        { path: "/shop", name: "商品" },
        { path: "/speack", name: "评论" },
        { path: "/shophome", name: "商家" },
      ],
      //创建一个变量来保存它的值
      goodsList: [],
      getshome: {},
      getspac: [],
    };
  },
  methods: {
    //配置ajax请求
    //商品
    async getshop() {
      let { goodsList } = await api_getshop();
      this.goodsList = goodsList;
    },
    //商家
    async getshophome() {
      let { data } = await api_getshophome();

      this.getshome = data;
    },
    //评论
    //这里会留一个伏笔 判断是0还是1在进行渲染
    async getspeack() {
      let { data, errno } = await api_getshopspeack();
      this.getspac = data;
    },
  },

  created() {
    this.getshop();
    this.getshophome();
    this.getspeack();
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.nav {
  line-height: 40px;
  border-bottom: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.main {
  flex: 1;
  overflow: scroll;
}

a {
  color: #cccccc;
}
&.active {
  color: red;
}
.header {
  height: 170px;
}
</style>